import React,{useState,useEffect} from 'react'
import Hoc_login from '../../utils/Hoc_login'
import { get_table } from '../../api'
import { Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import { Switch } from 'antd';
interface Props {
    
}
interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
const Index = (props: Props) => {
    const [list,setList]=useState([])
    // 获取列表
    useEffect(() => {
            let getData=async ()=>{
                let  res=await get_table()
                if(res.status===200){
                     setList(res.data)
                }   
               
            }
                getData()
    },[])
    
    const onChange = (key:string) => {
        console.log(key)
        let  arr=[...list];
        arr.forEach((item:any,index)=>{
            if(item.key==key){
                item.like=!item.like;
  
            }
        })

        setList(arr)

};
const columns: TableProps<DataType>['columns'] = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '头像',
    dataIndex: 'icon',
    key: 'icon',
     render: (text) =><img  src={text}/>,
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
   {
    title: '日期',
    dataIndex: 'date',
    key: 'date',
  },
   {
    title: '状态',
    dataIndex: 'flag',
    key: 'flag',
  },
     {
    title: '喜欢',
    dataIndex: 'like',
    key: 'like',
    render:(text,record)=> <Switch checked={text} onChange={()=>onChange(record.key)} />,
     },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>修改 </a>
        <a>删除</a>
      </Space>
    ),
  },
];

    return (
        <div>
             角色管理

             
             <Table columns={columns} dataSource={list} />
        </div>
    )
}

export default  Hoc_login(Index)
